<template>
  <div>
    <div class="top">
      <img src="../../src/assets/image/callout.svg" alt="">
      <el-button type="primary" @click="gofbwz">发布文章</el-button>
    </div>
    <div class="con">
      <div class="item" v-for="item, i in list" :key="i">
        <img :src="item.avatar.url" alt="">
        <h4>{{ item.title }}</h4>
        <p>{{ item.description }}</p>
        <el-button plain @click="gogoods(item._id)">进入专栏</el-button>
      </div>
    </div>
    <el-button>加载更多</el-button>
  </div>
</template>

<script lang="ts"  setup>
import { getColumns, getid } from "../utlis/api"
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const list = ref([])
const totel = ref(0)
const pageList = ({
  currentPage: 1,
  pageSize: 11
})
//请求数据
const pageData = () => {
  getColumns(pageList).then(res => {
    console.log(27, res);
    list.value = res.data.list
    totel.value = res.data.count
  })
}
//进入专栏
const gogoods = (id: any) => {

  router.push({
    path: "/goods",
    query: {
      id
    }
  })

}
// 跳转     
const gofbwz = () => {
  if (!store.state.token) {
    router.push("/login")
  } else {
    router.push('/create')
  }

}
pageData()
</script>

<style scoped lang='scss'>
.top {
  width: 200px;
  height: 300px;
  margin: auto;
  text-align: center;

  img {
    width: 200px;
    height: 200px;
  }
}

.con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  text-align: center;

  .item {
    border: 1px solid #ccc;
    width: 300px;
    height: 260px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;

    >p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /*想省略几行就写几*/
      -webkit-box-orient: vertical;
    }
  }

  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>